<template>
  <div class="app-container">
    <div class="grade_wrap">
      <div class="grade_order">
        <el-card class="list">
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">评价详情</span>
            <div>
              <div class="top">
                <p class="title">用户评伦：{{comment.text}}</p>
              </div>
              <div class="top" v-if="reply.length>0">
                <p class="title"v-for="replyItem in reply" >商家回复： {{replyItem.content}}</p>
              </div>
            </div>
          </div>
          <div class="grade_inner">
            <div class="left">
              <div class="rate">
                <p>服务态度 &nbsp;</p>
                <el-rate disabled v-model="comment.score">
                </el-rate>
              </div>
              <div class="rate">
                <p>商品描述 &nbsp;</p>
                <el-rate disabled v-model="comment.goodsDesc">
                </el-rate>
              </div>
              <div class="rate">
                <p>送货速度 &nbsp;</p>
                <el-rate disabled v-model="comment.deliverySpeed">
                </el-rate>
              </div>
            </div>
            <div class="right">
              <el-input class="content" type="textarea" resize="none" :autosize="{ minRows: 9, maxRows: 9}" placeholder="请回复买家的评价" v-model="content">
              </el-input>
            </div>
          </div>
          <el-dialog v-model="gradeImageVisible" size="tiny">
            <img width="100%" :src="comment.avatar" alt="">
          </el-dialog>
          <div class="grade_btn">
            <el-button type="primary" @click="sellerReply">回复评价</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
  import { reply, getReply } from '@/api/comment'
  import formatDate from '@/utils/date'
  export default {
    data() {
      return {
        content: '',
        gradeImageUrl: "",
        gradeImageVisible: false,
        comment_id: "",
        comment: {},
        reply: []
      };
    },
    created() {
      let comment = this.$route.query.comment
      comment = JSON.parse(comment)

      this.$nextTick(() => {
        this.comment = comment
        this.comment_id = comment.id
        if (comment.status == 2) {
          getReply(comment.id).then((res) => {
            if (res.message == "ok") {
              this.reply = res.reply
            
            }
          })
        }
      })
    },
    methods: {
      handleRemove(file, fileList) {
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      sellerReply() {
        reply(this.comment_id, this.content).then((res) => {
          if (res.message == "ok") {
            this.$message({
              type: "success",
              message: "回复成功!"
            });
            this.$router.push({ path: '/grade/index' })
          }
        })
      }
    }
  };

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .grade_wrap {
    // display: flex;
    .grade_order {
      // flex: 0 0 300px;
      // height: 250px;
      // background-color: #eee;
      .list {
        width: 600px;
        padding: 10px;
        .top {
          padding-left: 100px;
          font-size: 14px;
          color: #666;
          .title {
            color: #333;
          }
        }
        .grade_inner {
          display: flex;
          margin-bottom: 20px;
          .left {
            flex: 0 0 160px;
          }
          .right {
            flex: 1;
            margin-left: 30px;
            margin-top: 10px;
          }
        }
        .grade_btn {
          width: 538px;
          padding: 10px;
          text-align: center;
        }
      }
    }
  }
</style>